<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.min.js"></script>
<title>JQuery MagicGrid Inline 编辑示例</title>
<script type="text/javascript" src="/js/mac/webapp.min.js"></script>
<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript" src="/js/mac/pager.min.js"></script>
<link type="text/css" rel="stylesheet" href="/css/default/mac/grid/grid.min.css" />
<script type="text/javascript" src="/js/mac/grid.min.js"></script>
<style type="text/css">
.money { text-align: right; }
.demoPanel .viewPort { height: 420px; width: 480px; }
</style>
</head>
<body>
<link type="text/css" rel="stylesheet" href="/css/default/mac/combo/combo.min.css" />
<script type="text/javascript" src="/js/mac/combo.min.js"></script>
<style type="text/css">
.combo .tr { display: block; }
.grid .combo .body { margin-top: 24px; }
.grid .cell { border: 1px solid #CCC; overflow: hidden; height: 20px; }
.grid .cellTf { border: none; height: 20px; width: 100%; }
.grid .cellNf { text-align: right; }
</style>
<script type="text/javascript">
$(function(){
	var gd = $('.view');
	var idx = 1; //index of new record
	var crs = {}; //changed records
	var dd = []; //data for combobox
	for(var i=1;i<=5; i++)
		dd.push({ code: i, name: 'Subject ' + i });
	gd.onChangeValue = function(r, f, v, b){
		var k = r.no, x = crs[k], o = gd.oldData[k] || {};
		b = (b==undefined? (o[f]==v):b);
		if(b){
			if(x){
				delete x[f];
				if($.isEmptyObject(x))
					delete crs[k];
			}
		}else{
			crs[k] = x || {};
			crs[k][f] = v;
		}
	} 
	var cols = [{
		field: 'no', title : '<input type="checkbox" name="all" />', width: 20,
		render: function(r, tr, vw){
			var a = $('<input type="checkbox" />');
			a.attr({ name: 'no', value: r.no });
			return a;
		}
	},{
		field: 'subject', title : 'Subject', width: 200,
		render: function(r, tr, vw){
			var f = 'subject';
			if(!tr.hasClass('selected'))
				return r[f].name;
			var a = $('<div class="combo"></div>');
			a.mac('combo', {
				height: 20,
				keyField: 'code',
				displayField: 'name',
				multiSelect: false,
				width: '100%',
				boxMinWidth: 200,
				boxTop: 0,
				boxLeft: 0,
				cols : [{
					field: 'code', width: '30%'
				},{
					field: 'name', width: '70%'
				}],
				data: dd,
				onSelect: function(me, sd, fd){
					var v = r[f] = fd[0] || {};
					var o = gd.oldData[r.no] || {};
					var b = o[f]?(o[f].code==v.code): false;
					gd.onChangeValue(r, f, v, b);
					me.close();
				}
			}).attr('name', f).select(r.subject.code);
			return a;
		}
	},{
		field: 'summary', title : 'Summary', width: 150,
		render: function(r, tr, vw){
			var f = 'summary';
			if(!tr.hasClass('selected'))
				return r[f];
			var a = $('<input type="text" class="cellTf" />');
			a.attr('name', f).change(function(){
				var v = r[f] = a.val();
				gd.onChangeValue(r, f, v);
			}).val(r[f]);
			return $('<div class="cell"></div>').append(a);
		}
	},{
		field: 'debit', title : 'Debit', width: 75, sort: true,
		render: function(r, tr, vw){
			var f = 'debit';
			if(!tr.hasClass('selected'))
				return '<div class="money">$' + r[f] + '</div>';
			var a = $('<input type="text" class="cellTf cellNf" />');
			a.attr('name', f).change(function(){
				var v = r[f] = a.val();
				if (!v || isNaN(v) || v > self.pageCount){
					alert('Please input a number.')
					return false;
				}
				gd.onChangeValue(r, f, v);
			}).val(r[f]);
			return $('<div class="cell"></div>').append(a);
		}
	}];
	gd.reRenderRow = function(tr){
		var k = tr.attr('name');
		$.each(cols, function(n, c){
			if(c.render && c.field!='no'){
				var td = tr.find('.td[name=' + c.field + ']');
				td.empty().append(c.render(gd.data[k], tr, gd));
			}
		});
	}
	gd.mac('grid', {
		key: 'no',
		cols : cols,
		loader: {
			params: {},
			autoLoad: false
		},
		onRowClick: function(){
			var tr = $(this), sr = gd.selected;
			if(tr.hasClass('selected'))
				return true;
			if(sr)
				gd.reRenderRow(sr.removeClass('selected'));
			gd.selected = tr.addClass('selected');
			gd.reRenderRow(tr);
			return true;
		},
		afterLoad: function(dd, po){
			gd.oldData = mac.eval(JSON.stringify(gd.data));
		}
	});
	gd.loadData([{
		no: 1,
		subject: { code: 1, name: 'Subject 1' },
		summary: 'summary 1',
		debit: 45.90
	},{
		no: 2,
		subject: { code: 2, name: 'Subject 2' },
		summary: 'summary 2',
		debit: 18.50
	}]);
	gd.seek('all').click(function(){
		gd.seek('no').prop('checked', $(this).prop('checked'));
	});
	$('.toolbar .item').click(function(){
		var ec = $(this), act = ec.attr('action');
		switch(act){
			case 'add':
				gd.addRow({ no: 'n'+idx, subject: dd[0], $summary: '', debit: 0, credit: 0 });
				idx++;
				break;
			case 'del':
				var keys = $.map(gd.find('input[name=no]:checked'), function(c){
					return c.value;
				});
				keys = gd.delRow(keys);
				$.each(keys, function(n, c) {
					delete crs[c];
				});
				break;
			case 'chg':
				alert(JSON.stringify(crs));
				break;
		}
	});
});
</script>
<div class="toolbar">
	<div class="item button" action="add">Add Row</div>
	<div class="item button" action="del">Delete Row</div>
	<div class="item button" action="chg">Show Changed Data</div>
	Updated at 2012-03-06.
</div>
<div class="clear"></div>
<div class="viewPort" style="height: 390px;">
	<div class="view grid"></div>
</div></body>
</html>
